<template>
	<div class="container">
		<h1>工具下载</h1>
		<div class="toolsItem" v-for="item in uploadList">
			<div class="title">
				{{ item.fileName }}
			</div>
			<div class="detail">
				<div>
					<img
						:src="
							item.fileName.split('.')[1] == 'exe'
								? exeIcon
								: item.fileName.split('.')[1] == 'zip'
								? zipIcon
								: fileIcon
						"
					/>
				</div>
				<el-progress style="width: 1000px" :percentage="item.process" />
			</div>
		</div>
		<div class="toolsItem" v-for="item in fileList">
			<div class="title">
				{{ item.fileName || new Date().toLocaleDateString() }}
			</div>
			<div class="detail">
				<div>
					<img
						:src="
							item.path.split('.')[1] == 'exe'
								? exeIcon
								: item.path.split('.')[1] == 'zip'
								? zipIcon
								: fileIcon
						"
					/>
				</div>
				<p>
					{{ item.describe || "暂无简介" }}
				</p>
			</div>
			<el-divider />
			<div class="bottom">
				<span class="iconfont blog-yonghu"></span>{{ item.username }}
				<span class="iconfont blog-xiazaidaoru"></span>{{ item.downloadCount }}
				<span class="iconfont blog-shijian"></span
				>{{ dayjs(item.createTime).format("YYYY-MM-DD") }}

				<div class="download">
					<el-button
						type="danger"
						@click="delFile(item.id)"
						v-if="$store.state.userinfo"
						>删除</el-button
					>
					<el-button @click="edit(item)" v-if="$store.state.userinfo"
						>修改信息</el-button
					>
					<el-button type="primary" @click="download(item)">下载</el-button>
				</div>
			</div>
		</div>
	</div>
	<Upload
		:data="{ type: 'tool' }"
		v-if="$store.state.userinfo"
		@onUploadProgress="onUploadProgress"
		@on-complate="complate"
		:before-upload="beforeUpload"
		:berore-choose-file="beroreChoose"
	>
		<div class="circle"><img :src="cloudIcon" /></div>
	</Upload>
	<el-dialog v-model="dialogVisible" title="保存" width="30%">
		<el-form>
			<el-form-item label="标题">
				<el-input v-model="form.fileName" placeholder="请输入标题"></el-input>
			</el-form-item>
			<el-form-item label="描述">
				<el-input
					type="textarea"
					v-model="form.describe"
					placeholder="请输入描述"
				></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submit">确认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script setup>
import {
	ElButton,
	ElUpload,
	ElMessage,
	ElDialog,
	ElForm,
	ElFormItem,
	ElInput,
	ElLoading,
	ElProgress,
	ElDivider,
} from "element-plus";
import exeIcon from "@/assets/exeIcon.svg";
import fileIcon from "@/assets/fileIcon.svg";
import zipIcon from "@/assets/zipIcon.svg";
import cloudIcon from "@/assets/cloudIcon.svg";
import "element-plus/es/components/button/style/css";
import "element-plus/es/components/upload/style/css";
import "element-plus/es/components/dialog/style/css";
import "element-plus/es/components/form/style/css";
import "element-plus/es/components/form-item/style/css";
import "element-plus/es/components/input/style/css";
import "element-plus/es/components/loading/style/css";
import "element-plus/es/components/progress/style/css";
import "element-plus/es/components/divider/style/css";
import { reactive, ref } from "vue";
import {
	UploadTools,
	GetFileList,
	DownloadFile,
	DeleteFile,
	UpdateFile,
} from "@/api/request";
import Upload from "@/components/Upload.vue";
import dayjs from "dayjs";
const form = reactive({
	id: 0,
	path: "",
	fileName: "",
	describe: "",
	mimeType: "",
});

const dialogVisible = ref(false);

const submit = () => {
	if (form.id != 0) {
		UpdateFile(form).then(() => {
			ElMessage.success("修改成功");
			dialogVisible.value = false;
			getFileList();
		});
	} else {
		UploadTools(form).then((res) => {
			if (res.success) {
				ElMessage.success("上传成功");
				dialogVisible.value = false;
				form.id = 0;
				getFileList();
			} else {
				ElMessage.error(res.msg);
			}
		});
	}
};
const fileList = ref([]);

const getFileList = () => {
	GetFileList().then((res) => {
		if (res.success) {
			fileList.value = res.data;
		} else {
			ElMessage.error(res.msg);
		}
	});
};
getFileList();

const delFile = (id) => {
	DeleteFile(id).then((res) => {
		if (res.success) {
			ElMessage.success("删除成功");
			getFileList();
		} else {
			ElMessage.error(res.msg);
		}
	});
};

const edit = (item) => {
	form.id = item.id;
	form.path = item.path;
	form.fileName = item.fileName;
	form.describe = item.describe;
	dialogVisible.value = true;
};

const complate = (e) => {
	UploadTools({
		path: e.path,
		fileName: uploadList.value[0].fileName,
		describe: "",
		mimeType: e.mimeType,
	}).then((res) => {
		if (res.success) {
			ElMessage.success("上传成功");
			uploadList.value = [];
			getFileList();
		} else {
			ElMessage.error(res.msg);
		}
	});
};

const onUploadProgress = (e) => {
	uploadList.value[0].process = parseFloat(
		((e.loaded / e.total) * 100).toFixed(2)
	);
};

const uploadList = ref([]);
const beroreChoose = () => {
	if (uploadList.value.length > 0) {
		ElMessage.error("请等待其他文件上传完毕！");
		return false;
	}
	return true;
};
const beforeUpload = (file) => {
	uploadList.value.unshift({
		fileName: file.name,
		createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
		process: 0,
	});
	return true;
};

const download = (fileInfo) => {
	DownloadFile(fileInfo.id).then((res) => {
		if (!!res.success) {
			let a = document.createElement("a");
			a.href = window.baseUrl + "/upload/" + res.data.path;
			a.download = fileInfo.fileName + "." + fileInfo.path.split(".")[1];
			a.target = "_blank";
			document.body.appendChild(a);
			a.click();
			document.body.removeChild(a);
		} else {
			ElMessage.error(res.msg);
		}
	});
};
</script>

<style lang="less">
.toolsItem {
	border: 1px solid #eee;
	padding: 20px;
	box-sizing: border-box;
	margin-bottom: 20px;
	box-shadow: 0 0 10px #eee;
	border-radius: 10px;
}
.title {
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 20px;
}
.detail {
	display: flex;
	align-items: center;
	img {
		width: 50px;
		height: 50px;
		margin-right: 20px;
	}
	p {
		flex: 1;
		font-size: 16px;
		margin-right: 20px;
	}
}
.circle {
	position: fixed;
	bottom: 80px;
	right: 80px;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	cursor: pointer;
	background-color: rgb(64, 158, 255);
	display: flex;
	align-items: center;
	justify-content: center;
	color: aliceblue;
}
.circle:hover {
	box-shadow: 0 0 15px rgb(181, 181, 181);
}
.bottom {
	display: flex;
	align-items: center;
	.iconfont {
		margin-right: 8px;
		font-size: 18px;
		margin-left: 20px;
	}
	.iconfont:nth-child(1) {
		margin-left: 0px;
	}
	.download {
		margin-left: auto;
	}
}
</style>
